<template>
  <div> 
    <el-button size='mini' @click="xs">选中删除</el-button>
    <el-table
      ref="multipleTable"
      :data="$store.state.cart"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55">
        <template slot-scope="scope">
          <!-- <span>{{scope.row.flag}}</span> -->
          <el-checkbox @change="xuan(scope.row.id)" v-model="scope.row.flag"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="商品">
        <template slot-scope="scope">
          <img :src="'img/'+scope.row.img" alt="">
        </template>
      </el-table-column>
      <el-table-column prop="name" label="价格">
        <template slot-scope="scope">
          ￥{{scope.row.price}}
        </template>
      </el-table-column>
      <el-table-column prop="number" label="数量" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button size='mini' @click='jia(scope.row.id)'>+</el-button>
          {{scope.row.number}}
          <el-button size='mini'  @click='jian(scope.row.id)'>-</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="小计" show-overflow-tooltip>
        <template slot-scope="scope">
          ￥{{scope.row.price*scope.row.number}}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" show-overflow-tooltip>
         <template slot-scope="scope">
         <el-button  icon="el-icon-delete" @click='del(scope.row.id)'></el-button>
        </template>
      </el-table-column>
    </el-table>
    <p>总价:{{$store.getters.count}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cart:this.$store.state.cart,
    }
  },
   methods: {
     //删除
     del(id){},
     //加
     jia(id){
       var index=this.cart.findIndex((item,key)=>{
         return item.id==id
       })
       this.$store.commit('addnum',index)
     },
     //减
     jian(id){
       var index=this.cart.findIndex((item,key)=>{
         return item.id==id
       })
       this.$store.commit('catnum',index)
     },
     //删除
     del(id){
       var index=this.cart.findIndex((item,key)=>{
         return item.id==id
       })
       this.$store.commit('del',index)
     },
     //选中
     xuan(id){
        // this.flag1=!this.flag1
        var index=this.cart.findIndex((item,key)=>{
         return item.id==id
       })
       this.$store.commit('xuan',index)
     },
     //选中删除
     xs(){
       this.$store.commit('xs')
     }
   },
   watch:{
     
   }
}
</script>
<style lang="scss">
    img{
      width: 100px;
      height: 100px;
    }
</style>